'use client'

import { useState } from 'react'
import {clsx} from "clsx"

export default function SelectedElement() {

  const [selected, setSelected] = useState("")

  const elements = [
    "react",
    "vue",
    "jquery",
    "bootstrap"
  ]

  return (
    <ul className={"w-1/2 mx-auto mt-20 bg-slate-200 p-5 flex gap-5"}>
      {
        elements.map( item => (
          <li key={item} className={clsx("bg-pink-400 size-24 rounded-full flex justify-center items-center cursor-pointer", selected === item && 'ring-2 ring-offset-2 ring-blue-500')} onClick={() => setSelected(item)}>{item}</li>
        ))
      }
    </ul>
  )
}
